| Navigation 导航 | 您所在的位置：网站首页 › element ui菜单默认展开第二个菜单 › Navigation 导航 |
|
Menu 菜单顶栏左右侧栏Collapse 折叠面板Menu 属性Menu 方法Menu 事件Menu 插槽SubMenu 属性SubMenu 插槽Menu-Item 属性Menu-Item 事件Menu-Item 插槽Menu-Item-Group 属性Menu-Item-Group 插槽源代码贡献者Menu 菜单 为网站提供导航功能的菜单。 顶栏顶部栏菜单可以在各种场景中使用。 导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 Processing Center Workspace item one item two item three item four item one item two item three Info Orders Processing Center Workspace item one item two item three item four item one item two item three Info Orders import { ref } from 'vue'const activeIndex = ref('1')const activeIndex2 = ref('1')const handleSelect = (key: string, keyPath: string[]) => { console.log(key, keyPath)}左右您可以将菜单项放置在左边或右边。 LOGO Processing Center Workspace item one item two item three item four item one item two item three import { ref } from 'vue'const activeIndex = ref('1')const handleSelect = (key: string, keyPath: string[]) => { console.log(key, keyPath)}.flex-grow { flex-grow: 1;}侧栏垂直菜单，可内嵌子菜单。 通过el-menu-item-group组件可以实现菜单进行分组，分组名可以通过title属性直接设定，也可以通过具名 slot 来设定。 Default colors Navigator One item one item two item three item four item one Navigator Two Navigator Three Navigator Four Custom colors Navigator One item one item two item three item four item one Navigator Two Navigator Three Navigator Four import { Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath)}const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath)}Collapse 折叠面板垂直导航菜单可以被折叠 expand collapse Navigator One Group One item one item two item three item four item one Navigator Two Navigator Three Navigator Four import { ref } from 'vue'import { Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'const isCollapse = ref(true)const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath)}const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath)}.el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; min-height: 400px;}Menu 属性属性说明类型可选值默认值mode菜单展示模式stringhorizontal / verticalverticalcollapse是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）boolean—falseellipsis是否省略多余的子项（仅在横向模式生效）boolean—truebackground-color菜单的背景颜色（十六进制格式）（已被废弃，使用—bg-color）string—#fffffftext-color文字颜色（十六进制格式）（已被废弃，使用—text-color）string—#303133active-text-color活动菜单项的文本颜色（十六进制格式）（已被废弃，使用—active-color）string—#409EFFdefault-active页面加载时默认激活菜单的 indexstring——default-openeds默认打开的 sub-menu 的 index 的数组Array——unique-opened是否只保持一个子菜单的展开boolean—falsemenu-trigger子菜单打开的触发方式，只在 mode 为 horizontal 时有效。stringhover / clickhoverrouter是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。boolean—falsecollapse-transition是否开启折叠动画boolean—true Menu 方法方法名说明参数open展开指定的 sub-menuindex: 需要打开的 sub-menu 的 indexclose收起指定的 sub-menuindex: 需要收起的 sub-menu 的 index Menu 事件事件名说明回调参数select菜单激活回调index: 选中菜单项的 index, indexPath: 选中菜单项的 index path, item: 选中菜单项, routeResult: vue-router 的返回值（如果 router 为 true）opensub-menu 展开的回调index: 打开的 sub-menu 的 index, indexPath: 打开的 sub-menu 的 index pathclosesub-menu 收起的回调index: 收起的 sub-menu 的 index, indexPath: 收起的 sub-menu 的 index path Menu 插槽插槽名说明子标签—自定义默认内容SubMenu / Menu-Item / Menu-Item-Group SubMenu 属性属性说明类型可选值默认值index唯一标志string——popper-class为 popper 添加类名string——show-timeout展开 sub-menu 的延时number—300hide-timeout收起 sub-menu 的延时number—300disabled是否禁用boolean—falsepopper-append-to-body（已废弃）是否将弹出菜单插入至 body 元素。 在菜单的定位出现问题时，可尝试修改该属性boolean—一级子菜单：true / 非一级子菜单：falsepopper-offset弹出窗口偏移number—6expand-close-icon父菜单展开且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效string | Component——expand-open-icon父菜单展开且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效string | Component——collapse-close-icon父菜单收起且子菜单关闭时的图标， expand-close-icon 和 expand-open-icon 需要一起配置才能生效string | Component——collapse-open-icon父菜单收起且子菜单打开时的图标， expand-open-icon 和 expand-close-icon 需要一起配置才能生效string | Component—— SubMenu 插槽插槽名说明子标签—自定义默认内容SubMenu / Menu-Item / Menu-Item-Grouptitle自定义标题内容— Menu-Item 属性属性说明类型可选值默认值index唯一标志string/null—nullrouteVue Router 路径对象object——disabled是否禁用boolean—false Menu-Item 事件事件名说明回调参数click菜单点击时的回调函数el-menu-item 实例 Menu-Item 插槽插槽名说明—自定义默认内容title自定义标题内容 Menu-Item-Group 属性属性说明类型可选值默认值title组标题string—— Menu-Item-Group 插槽插槽名说明子标签—默认插槽内容Menu-Itemtitle自定义组标题内容— 源代码组件 • 文档 贡献者云游君 三咲智子 RealityBoy jeremywu zz Aex kooriookami msidolphin C.Y.Kun Delyan Haralanov Yuyao Nie Alan Wang feiyu ParkerFiend Carter Li iamkun blackie SongWuKong renovate[bot] BeADre gjfei Jimmy on the field of hope Square Coin Hades-li Juliano Penna BaboonKing qiang |
| CopyRight 2018-2019 实验室设备网 版权所有 |